<template>
	<view class="account_number">
		<input v-model.trim="verification" type="text" placeholder="请输入验证码" class="account_number_value" />
		<text class="Switch" v-show="countdown">验证码</text>
		<text v-show="!countdown" class="Switch">{{ count }}s</text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			countdown: true,
			count: '',
			timer: null,
			countdownNum: null,
			verification: ''
		};
	},
	methods: {
		send(n) {
			console.log(n);
			var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
			// if (!pattern.test(this.verification) && !this.countdownNum) {
			// 	// this.$toast({
			// 	// 	message: '请输入您的邮箱地址'
			// 	// });
			// 	return;
			// }
			const TIME_COUNT = 60;

			if (!this.timer) {
				this.count = TIME_COUNT;
				this.countdown = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						clearInterval(this.timer);
						this.timer = null;
						this.countdown = true;
						this.count = 0;
						this.countdownNum = null;
					}
				}, 1000);
			}
		}
	}
};
</script>
<style>
.account_number_value .uni-input-input {
	color: #999999 !important;
}
</style>
<style lang="scss" scoped>
.account_number {
	display: flex;
	justify-content: space-between;
	align-items: center;
	// margin: 30rpx 70rpx 0 70rpx;
	// padding: 40rpx 0;
	padding: 0 20rpx;

	border-bottom: 2rpx solid #ededed;
	.account_number_value {
		flex: 1;
		font-size: 32rpx;
		color: #999999 !important;
		input {
			color: #999999 !important;
		}
	}
	.Switch {
		color: #5ca5d6;
		font-size: 24rpx;
	}
}
</style>
